<template>
  <view
    class="header-list"
    :style="{ height: pageHeight }"
  >
  
    <scroll-view class="scroll-view" scroll-y @scrolltolower="onScrollToLower">
      <view class="header-item" v-for="item in listData" :key="item.id" @click="onSelect(item)">
        <view class="hi-header">
          <view>
            <text v-if="item.invoiceType === 1">增值税专用发票抬头</text>
            <text v-if="item.invoiceType === 0">
              电子普通发票抬头 - 
              <text v-if="item.titleType === 0">单位</text>
              <text v-if="item.titleType === 1">个人</text>
            </text>
          </view>
          <!-- <view class="btn-address">
            <text>收票地址</text>
            <u-icon name="arrow-right"></u-icon>
          </view> -->
        </view>
        
        <view class="hi-body">
          <view class="content">
            <view class="name">
              <u--text
                size="28rpx"
                color="#333"
                :lines="1"
                :text="item.titleName">
              </u--text>
              <u-tag text="默认" plain size="mini" v-if="item.defaultFlag === 'Y'"></u-tag>
            </view>
            <view class="duty">
              <text>税号 </text>
              <u--text
                size="26rpx"
                color="rgba(0, 0, 0, 0.45)"
                :lines="1"
                :text="item.taxNo">
              </u--text>
            </view>
          </view>
          <view class="right" @click.stop="toEditHeader(item.id)">
            <u--image src="/static/edit.png" width="36rpx" height="36rpx"></u--image>
          </view>
        </view>
      </view>
      <view class="load-more">
        <u-loadmore :status="loadingStatus" :font-size="28" :icon-size="28" />
      </view>
    </scroll-view>
    
    <view class="hl-footer">
      <u-button type="primary" text="添加发票抬头" @click="toEditHeader()"></u-button>
    </view>
  </view>
</template>
 
<script>
  import { mapState, mapGetters, mapMutations } from 'vuex'
  
  // 发票抬头列表
  // 1、作为「发票助手」选择发票抬头使用：
  // 可传入发票类型，抬头类型过滤数据 emit('selector', { invoiceType, titleType })
  // 2、作为「发票抬头」列表展示使用：需要传入props :is-component="true"，才会立即获取数据。
  export default {
    name: 'header-list',
    props: {
      isComponent: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 列表请求参数
        listParams: {
          pageNum: 1,
          pageSize: 10,
          invoiceType: undefined, // 发票类型；0-电子普通发票，1-增值税专用发票
          titleType: undefined, // 抬头类型；0-单位，1-个人/非企业单位
        },
        
        // 加载状态 loadmore-加载前，loading-加载中，nomore-无数据
        loadingStatus: 'loadmore',
        
        // 列表数据
        listData: [],
        
        // 是否选择页（发票助手）
        isSelector: false,
      }
    },
    computed: {
      ...mapGetters('global', ['getSystemInfo']),
      ...mapState('user', ['userInfo']),
      
      pageHeight() {
        const barHeight = this.getSystemInfo.navBarHeight
        const height = this.isSelector
          ? `100vh`
          : `calc(100vh - ${barHeight}px - 44px - 20rpx - 70rpx)`
        return height
      }
    },
    methods: {
      // 选择发票抬头
      onSelect(option) {
        if (this.isSelector) {
          uni.navigateBack({
            success: () => {
              const eventChannel = this.getOpenerEventChannel()
              eventChannel.emit('selectInvoiceHeader', option)
            }
          })
        }
      },
      
      // 滚动到底部
      onScrollToLower() {
        if (this.loadingStatus === 'loadmore') {
          this.listParams.pageNum += 1
          this.getList()
        }
      },
      
      // 获取发票抬头列表
      async getList() {
        if (this.loadingStatus === 'loading') {
          return
        }
        try {
          this.loadingStatus = 'loading'
          const { pageNum, pageSize, invoiceType, titleType } = this.listParams
          const userId = this.userInfo.id
          const { datas } = await this.$request({
            url: '/order-center/invoice/title/list',
            data: { pageNum, pageSize, invoiceType, titleType, userId }
          })
          if (pageNum === 1) {
            this.listData = []
            await this.$nextTick()
            this.listData = datas.data
          } else {
            this.listData.push(...datas.data)
          }
          // await this.$nextTick()
          this.loadingStatus = datas.data.length < pageSize ? 'nomore' : 'loadmore'
        } catch (err) {
          this.loadingStatus = 'nomore'
        }
      },
      
      // 重置
      reset() {
        this.listParams.pageNum = 1
        this.loadingStatus = 'loadmore'
        this.getList()
      },
      
      // 添加/编辑 发票抬头
      toEditHeader(id) {
        uni.navigateTo({
          url: '/minePack/function/invoice/addInvoiceHeader',
          events: { update: this.reset },
          success: (res) => {
            if (id) {
              res.eventChannel.emit('edit', id)
            } else {
              res.eventChannel.emit('add')
            }
          }
        })
      },
    },
    created() {
      const eventChannel = this.getOpenerEventChannel()
      if (eventChannel) {
        // 作为选择发票抬头页，接收过滤条件后获取列表数据
        eventChannel.on('selector', (data) => {
          if (data) {
            this.listParams.invoiceType = data.invoiceType
            this.listParams.titleType = data.titleType
          }
          this.isSelector = true
          this.getList()
        })
      }
    },
  }
</script>

<style scoped lang="scss">
.header-list {
  .scroll-view {
    height: calc(100% - env(safe-area-inset-bottom) - 32rpx - 40px);
  }
  
  .header-item {
    background-color: #fff;
    padding: 0 32rpx;
    margin-bottom: 20rpx;
    
    .hi-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      font-size: 28rpx;
    }
    .btn-address {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 18rpx;
    }
    
    .hi-body {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      padding: 32rpx 0;
      .content {
        line-height: 2;
        .name {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 15rpx;
        }
        .duty {
          font-size: 26rpx;
          color: rgba(0, 0, 0, 0.45);
          display: flex;
          flex-direction: row;
        }
      }
      .right {
        padding: 10rpx;
      }
    }
  }
  
  .load-more {
    padding: 0 0 15rpx;
  }
  
  .hl-footer {
    box-sizing: border-box;
    padding: 32rpx 32rpx env(safe-area-inset-bottom);
    background-color: #fff;
  }
}
</style>
